---
import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap';
import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
import { getOpenGraphImageUrl } from '../../lib/open-graph';
import { officialRoadmapDetails } from '../../queries/official-roadmap';

export const prerender = false;

interface Params extends Record<string, string | undefined> {
  roadmapId: string;
}

const { roadmapId } = Astro.params as Params;
const roadmapData = await officialRoadmapDetails(roadmapId);
if (!roadmapData) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Not found';
  return Astro.rewrite('/404');
}

const ogImageUrl =
  roadmapData?.openGraph?.image ||
  getOpenGraphImageUrl({
    group: 'roadmap',
    resourceId: roadmapId,
  });
---

<SkeletonLayout
  permalink={`/${roadmapId}`}
  title={roadmapData?.seo?.title || roadmapData.title.page}
  briefTitle={roadmapData.title.card}
  ogImageUrl={ogImageUrl}
  description={roadmapData.seo.description}
  keywords={roadmapData.seo.keywords}
  resourceId={roadmapId}
  resourceType='roadmap'
  noIndex={true}
>
  <div class='relative container max-w-[1000px]!'>
    <EditorRoadmap
      resourceId={roadmapId}
      resourceType='roadmap'
      dimensions={roadmapData.dimensions!}
      client:load
      hasChat={false}
    />
  </div>
</SkeletonLayout>
